<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .deng {
            width:100px;
            height:100px;
            border-radius: 50%;
            
        }
    </style>
</head>
<div class="deng"></div>
<body>
    <script src="./js/jquery-1.11.1.js"></script>

    <!-- promise 红绿灯(绿3000、黄1000、红4000) 无限循环 -->
    <script>
        var deng = document.querySelector('.deng');
        function green() {
            return new Promise(function (resolve, reject) {
                deng.style.background  = 'green';
                setTimeout(function () {
                    resolve(yellow())
                },3000)
            })
        }

        function yellow() {
            return new Promise(function (resolve, reject) {
                deng.style.background = 'yellow';
                setTimeout(function () {
                    resolve(red())
                },1000)
            });
        }

        function red() {
            return new Promise(function (resolve, reject) {
                deng.style.background="red";
                setTimeout(function () {
                    resolve(green())
                },4000)
            })
        }

        green();
    </script>

    <!-- 通过函数封装一下promise -->
    <script>
        // function setPromise(str,delay) {
        //     return new Promise(function (resolve, reject) {
        //         setTimeout(function () {
        //             // console.log(str);
        //             resolve(str);
        //         }, delay)
        //     })
        // }
        // const p = setPromise('第一个', 3000);
        // // console.log(p);
        // p.then(function (res) {
        //     console.log(res);
        //     return setPromise('第二个',2000);
        // }).then(function (res) {
        //     console.log(res);
        //     return setPromise('第三个',1000);
        // }).then(function (res) {
        //     console.log(res);
        // })

        



    </script>


    <!-- promise封装 setTimeout2 -->
    <script>

        // setTimeout(function () {
        //     setTimeout(function () {
        //         setTimeout(function () {
                
        //         }, 1000)
        //     }, 2000)
        // }, 3000)

        // function f1(cb) {
        //     setTimeout(function () {
        //         console.log(1);
        //         cb(f3)
        //     },3000)
        // }

        // function f2 (cb) {
        //     setTimeout(function () {
        //         console.log(2);
        //         cb()
        //     },2000)
        // }

        // function f3() {
        //     setTimeout(function () {
        //         console.log(3);
        //     },1000)
        // }

        // f1(f2);
        
        // const p = new Promise(function (resolve, reject) {
        //     setTimeout(function () {
        //         reject('错误')
        //     }
        //     , 2000)
        // })

        // console.log(p);
        // p.then(function (res) {
        //     console.log(res, '<----res');
            
        // }).catch(function (reason) {
        //     console.log(reason, '<----reason catch方法');
        // })
    </script>

    <!--promise封装 setTimeout -->
    <script>

        // const p = new Promise(function (resolve,reject){
        //     setTimeout(function () {
               
        //         resolve('第一个');
        //     }, 2000)
        // })
        // p.then(function (res) {
        //     console.log(res);
        //     return new Promise(function (resolve, reject) {
        //         setTimeout(function () {
        //             resolve('第二个');
        //         }, 1000);
        //     })
        // }).then(function (res) {
        //     console.log(res, '<----');
        // }, function (err) {
            
        // })
        

        // setTimeout(function () {
        //     console.log('第二个');
        // }, 1000)
    </script>
    <!-- 用promise封装ajax -->
    <script>

        // const p = new Promise(function(resolve, reject) {
        //     $.ajax({
        //         url: `http://youyong.ba:808/mock/609a94bd9fdbd7143b8d6737/aa/manage/list/index`,
        //         timeout: 1000,
        //         success: function (res) {
        //             resolve(res);
        //         },
        //         error: function (err) {
        //             // console.log(err);
        //             reject(err);
        //         }
        //     })
        // })
        
        // p.then(function (res) {
        //     console.log(res);
        // }, function (reason) {
        //     console.log(reason);
        // })
        
    </script>

    <!-- promise基本使用 -->
    <script>
//         const p = new Promise(function (resolve, reject) {
//     setTimeout(function () {
//         // let data = '返回成功';
//         // resolve(data);
//         //失败
//         let err = '数据读取失败';
//         reject(err);
//     }, 1000);
    
// });

// console.log(p);
// p.then(function (res) {
//     console.log(res, '<--res');
// },function (reason) {
//     console.log(reason, '<--reason');
// })



    </script>
</body>
</html>